<template>
    <div class="registers">
      <div class="registers-content">
        <p>注册</p>
        <div style="width:90%;display: flex;border:1px solid #e2e2e2;border-radius:5px;padding:5px 10px;margin:0 auto;">
          <span style="padding-top: 10px;">*</span><i class="iconfont icon-company" style="line-height: 26px;color:#2c3e50;"></i>
          <input type="text" v-model="company" @keyup.enter="loginFn" placeholder="请输入公司名" style="width:90%;margin-left:10px;font-size:14px;border:0;">
        </div>
        <van-radio-group v-model="radio" style="display: flex;text-align: center;margin:10px 0;">
          <van-radio name="0" style="margin:5px 20px">经销商</van-radio>
          <van-radio name="1" style="margin:5px 20px">代理商</van-radio>
        </van-radio-group>

        <div style="width:90%;display: flex;border:1px solid #e2e2e2;border-radius:5px;padding:5px 10px;margin:10px auto;">
          <span style="padding-top: 10px;">*</span><i class="iconfont icon-xingming" style="line-height: 30px;color:#2c3e50;"></i>
          <input type="text" v-model="username" @keyup.enter="loginFn" placeholder="请输入姓名" style="width:90%;margin-left:10px;font-size:14px;border:0;">
        </div>
        <div style="width:90%;display: flex;border:1px solid #e2e2e2;border-radius:5px;padding:5px 10px;margin:10px auto;">
          <span style="padding-top: 10px;">*</span><i class="iconfont icon-shouji" style="line-height: 26px;color:#2c3e50;"></i>
          <input type="text" v-model="phone" @keyup.enter="loginFn" placeholder="请输入手机号" style="width:90%;margin-left:10px;font-size:14px;border:0;">
        </div>
        <div style="width:90%;display: flex;border:1px solid #e2e2e2;border-radius:5px;padding:5px 10px;margin:10px auto;">
          <i class="iconfont icon-mail" style="line-height: 26px;color:#2c3e50;"></i>
          <input type="text" v-model="email" @keyup.enter="loginFn" placeholder="请输入邮箱" style="width:90%;margin-left:10px;font-size:14px;border:0;">
        </div>

        <div style="margin:10px 0;">
          <!--<div style="width:50%;border:1px solid #e2e2e2;border-radius:5px;padding:5px 10px;float: left;margin-left: 10px;">-->
            <!---->
          <!--</div>-->
          <input type="text" v-model="code" @keyup.enter="loginFn" placeholder="请输入验证码" style="margin-left:10px;font-size:14px;border:1px solid #e2e2e2;float: left;width:50%;border-radius:5px;padding:10px;">
          <van-button type="primary" :class="bgc" style="width:35%;height:40px;line-height:40px;" @click="getCode" >{{content}}</van-button>
        </div>

        <div style="width:90%;display: flex;border:1px solid #e2e2e2;border-radius:5px;padding:5px 10px;margin:10px auto;">
          <span style="padding-top: 10px;">*</span><i class="iconfont icon-yonghu1" style="line-height: 26px;color:#2c3e50;"></i>
          <input type="text" v-model="accountNumber" @keyup.enter="loginFn" placeholder="请输入账号" style="width:90%;margin-left:10px;font-size:14px;border:0;">
        </div>

        <div style="width:90%;display: flex;border:1px solid #e2e2e2;border-radius:5px;padding:5px 10px;margin:10px auto;">
          <span style="padding-top: 10px;">*</span><i class="iconfont icon-mima1" style="line-height: 26px;color:#2c3e50;"></i>
          <input type="password" v-model="password" @keyup.enter="loginFn" placeholder="请输入密码" style="width:90%;margin-left:10px;font-size:14px;border:0;">
        </div>
        <div style="width:90%;display: flex;border:1px solid #e2e2e2;border-radius:5px;padding:5px 10px;margin:10px auto;">
          <span style="padding-top: 10px;">*</span><i class="iconfont icon-mima1" style="line-height: 26px;color:#2c3e50;"></i>
          <input type="password" v-model="password2" @keyup.enter="loginFn" placeholder="请输入再次密码" style="width:90%;margin-left:10px;font-size:14px;border:0;">
        </div>


        <div style="margin:20px 0;">
          <van-button type="primary"  style="width:90%;height:40px;line-height: 40px;" @click="sublimt" >注&nbsp;&nbsp;&nbsp;&nbsp;册</van-button>
        </div>
      </div>
    </div>
</template>

<script>
  import axios from 'axios';
  import services from "@/index.js";
  import { mapState } from 'vuex';
    export default {
        name: "registers",
        data () {
          return {
            bgc: '',
            content: '发送验证码',  // 按钮里显示的内容
            totalTime: 60,      //记录具体倒计时时间
            canClick: true, //添加canClick
            radio: '0',
            company: '', // 公司名
            username: '',
            phone: '',
            email: '',
            code: '',
            accountNumber: '',
            password: '',
            password2: ''
          }
        },
      computed: {
        ...mapState({
          store:"data"
        })
      },
      methods :{
        getCode(){
            if (this.phone.length == 11) {
              this.countDown()
            } else {
              this.$toast.fail("手机号码长度不足11位！");
            }
          },
        countDown() {
          if (!this.canClick) return  //改动的是这两行代码
          this.canClick = false
          this.content = this.totalTime + 's后重新发送'
          this.bgc="bgc"
          let clock = window.setInterval(() => {
            this.totalTime--
            this.content = this.totalTime + 's后重新发送'
            if (this.totalTime < 0) {
              window.clearInterval(clock)
              this.bgc=""
              this.content = '重新发送验证码'
              this.totalTime = 10
              this.canClick = true  //这里重新开启
            }
          },1000)
          var $this = this;
          //https://passport.api.lanaoboxiang.com/api/register
          axios.post('http://setting.api.bxfzrj.com:8080/api/sms/send/register/' + $this.phone,{})
            .then(function (response) {
            console.log(response);
          })
            .catch(function (error) {
              console.log(error);
              this.$toast.fail("网络异常！");
            });
        },
        sublimt(){
          if (!this.company.length) {
            this.$toast.fail("请输入公司名！");
          } else if (!this.username.length) {
            this.$toast.fail("请输入姓名！");
          } else if (!this.phone.length) {
            this.$toast.fail("请输入手机号！");
          } else if (!this.code.length) {
            this.$toast.fail("请输入验证码！");
          } else if (!this.accountNumber.length) {
            this.$toast.fail("请输入账号！");
          } else if (!this.password.length || !this.password2.length) {
            this.$toast.fail("请输入密码！");
          } else if (this.password !== this.password2) {
            this.$toast.fail("两次密码不一致！");
          } else if (this.password.length < 6 || this.password2.length < 6) {
            this.$toast.fail("密码长度最少为6位！");
          } else {
            // this.showTopTips = false
            var $this = this;
            axios.post('http://passport.api.bxfzrj.com:8080/api/register',{

                phone: $this.phone,
                account: $this.accountNumber,
                password: $this.password,
                vaildpassword: $this.password2,
                code: $this.code,
                company: $this.company,
                name: $this.username,
                type: $this.radio,
                email: $this.email

            })
              .then((response)=> {
                console.log(response)
                if (response.data.code != 0) {
                  $this.$toast.fail(response.data.message);
                }else{
                  $this.$toast.success('注册成功！')
                }
              })
              .catch((error)=>{
                console.log(error);
                this.$toast.fail("数据异常！");
              });
          }

        }
      },
      mounted(){

      }
    }
</script>

<style scoped>
  .registers{
    padding:10px;
    background: #fff;
    border:1px solid #000;
  }
  .bgc{
    background: #9ED99D;
    border-color: #9ED99D;
  }
</style>
